<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .article {
            width: 300px;
            font-size: 13px;
        }

        .compA,
        .compB,
        .compC {
            padding: 5px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>

        <!-- 通过v-if实现组件切换  当前组件显示 其他组件被销毁 (布局过程中所有组件都要写) -->
        <p>
            <button @click="showComp='comp-a'">comp-a</button>
            <button @click="showComp='comp-b'">comp-b</button>
            <button @click="showComp='comp-c'">comp-c</button>
        </p>
        <!-- 官方封装的一个组件  => 可以对应组件名称渲染某个组件 
             is => 要求传入的组件名称 (静态属性/动态属性)
        -->
        <!--  -->
        <!-- <component is="comp-a"></component>
        <component is="comp-b"></component>
        <component is="comp-c"></component> -->

        <!-- component一般配合keep-alive组件来缓存数据 => <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们  => 组件没有被销毁(数据被缓存了) => 组件切换过来时还可以使用原本的数据  -->
        <!-- 虽然组件数据已经被缓存,但是无法知道组件是否被卸载/初始化  => 代替方案=> 新增钩子函数 activated/deactivated 被 keep-alive 缓存的组件激活时调用。(其他组件切换到当前组件) 或 被 keep-alive 缓存的组件失活时调用。(当前组件切换到其他组件) -->
        <keep-alive>
            <component :is="showComp"></component>
        </keep-alive>
    </div>
</body>
<template id="compA">
    <div class="compA">
        这是组件A {{a}}
        <p><button @click="a++">a++</button></p>
    </div>
</template>
<template id="compB">
    <div class="compB">
        这是组件B:{{ms}}
    </div>
</template>
<template id="compC">
    <div class="compC">
        这是组件C {{getCount()}}
        <button @click="setCount(getCount() + 1)">count++</button>
    </div>
</template>
<script>

    // component 内置组件 => 组件动态切换
    // 如何知道组件切换 => mounted  destroyed  (被销毁的组件触发 -> destroyed,被挂载的组件触发mounted) => 缺点(组件被卸载之后 数据也被清楚了 => 没有数据缓存)

    // keep-alive 配和 component  => 组件动态切换 (数据缓存)
    // 如何知道组件切换 => 为了缓存组件数据,组件默认情况下不会被销毁(只有挂载没有销毁)  => 新增钩子函数 activated/deactivated 被 keep-alive 缓存的组件激活时调用。(其他组件切换到当前组件) 或 被 keep-alive 缓存的组件失活时调用。(当前组件切换到其他组件) --> 

    Vue.component("compA", {
        data() {
            return {
                a:1
            }
        },
        template: "#compA",
        methods: {

        },
        mounted() {
            console.log("组件A 被挂载");
        },
        destroyed() {
            console.log("组件A 被卸载");
        },
        activated() {
            console.log("组件A 激活");
        },
        deactivated() {
            console.log("组件A 失活");
        },
    })

    Vue.component("compB", {
        data() {
            return {
                ms:0,
                timer:null,
            }
        },
        template: "#compB",
        methods: {
        },
        mounted() {
            console.log("组件B 被挂载");
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.ms += 10;
                // console.log(this.ms);
            },10);
        },
        destroyed() {
            console.log("组件B 被卸载");
            clearInterval(this.timer);
        },
        activated() {
            console.log("组件B 激活");
        },
        deactivated() {
            console.log("组件B 失活");
        },
    })

    Vue.component("compC", {
        data() {
            return {
            }
        },
        template: "#compC",
        methods: {
        },
        // 子(代)组件 对应属性名引入数据  this["getCount"] = 父组件["getCount"] => 函数
        inject: ["getCount", "setCount"],
        mounted() {
            console.log("组件C 被挂载");
        },
        destroyed() {
            console.log("组件C 被卸载");
        },
        activated() {
            console.log("组件C 激活");
        },
        deactivated() {
            console.log("组件C 失活");
        },
    })



    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            showComp:"comp-a"
        },
        provide: function () {
            //  函数的this指向当前实例 

            return {
                count: this.count,  // this.count => 取出当前实例的count的值 => 1
                getCount: () => {    // 传入一个函数( 函数的this指向当前实例)  => 被子组件对应名称引用->当子组件调用方法时 会执行当前函数 -> 重新取值
                    return this.count;
                },
                setCount: (v) => {
                    this.count = v;
                },
                a: 10,
                b: 20,
            }
        }
    })


   


</script>

</html>